<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue起步</title>
<!-- 引入vue.js -->
<script src="js/vue.min.js"></script>
</head>
<body>
	<font size="7">你好啊，vue</font>


	<div id="app">{{ message }}</div>

	<div id="app-2">
		<!-- 指令v- ;将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致 -->
		<span v-bind:title='message'> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span>
	</div>

	<div id='app-3'>
		<p v-if='seen'>现在你看到我了</p>
		<p>我看见你了</p>
	</div>

	<div id="app-4">
		<ol>
			<li v-for='todo in todos'>{{todo.text}}</li>
		</ol>
	</div>

	<div id='app-5'>
		<p>{{message}}</p>
		<button v-on:click="reverseMessage">逆转消息</button>
	</div>

	<div id='app-6'>
		<p>{{message}}</p>
		<input v-model='message' />
	</div>

	<div id="app-7">
		<ol>
			<todo-item v-for='item in bookList' v-bind:todo='item'
				v-bind:key='item.id'> </todo-item>
		</ol>
	</div>
</body>
<!-- 写</body>后面，里面都行，写在<body>上面或者<head>里面渲染不出来 -->
<script>
	console.log("--------")
	//在实例化Vue时，需要传入一个选项对象,它可以包含数据、模版、挂载元素、方法、生命周期、等
	var app = new Vue({
		el : '#app', //以css选择器的形式选择跟元素
		data : {
			message : 'Hello Vue2!'
		}, //数据对象
		created: function(){
			alert("created勾子可以用来在一个实例被创建之后执行代码")
		}
	});

	var app2 = new Vue({
		el : '#app-2',
		data : {
			message : '页面加载于' + new Date().toLocaleString()
		}
	});

	//在浏览器控制台输入app3.seen=false，该内容被隐藏
	var app3 = new Vue({
		el : '#app-3',
		data : {
			seen : true
		}
	});

	//渲染列表 在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
	var app4 = new Vue({

		el : '#app-4',
		data : {
			todos : [ {
				text : '语文'
			}, {
				text : '数学'
			}, {
				text : '英语'
			} ]
		}
	});

	//处理用户输入 v-on
	var app5 = new Vue({
		el : '#app-5',
		data : {
			message : 'hello vue.js!'
		},
		methods : {
			reverseMessage : function() {
				console.log("逆转字符串")
				this.message = this.message.split(' ').reverse().join(' ')
			}
		}
	});

	//Vue还提供了v-model，它能轻松实现表单输入和应用状态之间的双向绑定
	var app6 = new Vue({
		el : '#app-6',
		data : {
			message : 'hello vue!'
		}
	});

	//组件化应用构建
	Vue.component('todo-item', {
		props : [ 'todo' ],
		template : '<li>{{ todo.text }}</li>'
	})

	var app7 = new Vue({
		el : '#app-7',
		data : {
			bookList : [ {
				id : 0,
				text : '语文'
			}, {
				id : 1,
				text : '数学'
			}, {
				id : 2,
				text : '英语'
			}, {
				id : 3,
				text : '化学'
			} ]
		}
	});
</script>
</html>